<template>
  <div style="height: 100%">
    <div class="title f-row ai-c bs-bb">
      <div
        v-for="i in titleArr"
        :class="[currnetId == i.id ? 'active' : '']"
        :key="i.id"
        @click="choiceTabId(i.id)"
      >
        {{ i.name }}
      </div>
    </div>
    <el-card :class="[currnetId == titleArr[0].id ? 'f-br' : 'f-ot']">
      <slot></slot>
    </el-card>
  </div>
</template>
<script>
export default {
  props: {
    titleArr: Array,
    currnetId: Number,
  },
  methods: {
    choiceTabId(i) {
      this.$emit("setId", i);
    },
  },
};
</script>
<style lang='less' scoped>
.f-br {
  border-radius: 0 0.25rem 0.25rem 0.25rem !important;
}
.f-ot {
  border-radius: 0.25rem !important;
}
/deep/ .el-card {
  height: calc(100% - 3.1rem);
  min-width: 735px;
  /*  min-height: 50rem; */
  /*  overflow-y: scroll; */
}
.title div {
  color: #858484;
  padding: 0.6875rem 1.3125rem 0.875rem 1.375rem;
  text-align: center;
  cursor: pointer;
}
.active {
  background: #ffffff;
  border-radius: 0.625rem 0.625rem 0 0;
  font-weight: bold;
  color: #161616 !important;
  font-size: 1.125rem;
  border: none;
}
.el-card {
  border-top: none;
}
</style>